<template>
  <div class="sector">
    <h3>应用领域</h3>
    <div class="tabaa">
      <div
        v-for="item in imgs"
        :key="item.id"
        class="table-item"
        @mouseenter="handleMouseEnter(item)"
        @mouseleave="handleMouseLeave(item)"
      >
        <img v-if="item.show" :src="item.imgsb" alt="图片" class="table-img" />
        <img v-else :src="item.imgsa" alt="图片" class="table-img" />
      </div>
    </div>
    <div class="tabbb">
      <div
        v-for="item in imagess"
        :key="item.id"
        class="table-item"
        @mouseenter="handleMouseEnter(item)"
        @mouseleave="handleMouseLeave(item)"
      >
        <img v-if="item.show" :src="item.imgsb" alt="图片" class="table-img" />
        <img v-else :src="item.imgsa" alt="图片" class="table-img" />
      </div>
    </div>
  </div>
</template>
    
    <script setup>
import { ref } from "vue";

const imgs = ref([
  {
    id: 1,
    imgsa: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/a1.jpg",
    imgsb: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/a2.png",
    show: false,
  },
  {
    id: 2,
    imgsa: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/b1.jpg",
    imgsb: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/b2.png",
    show: false,
  },
  {
    id: 3,
    imgsa: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/c1.jpg",
    imgsb: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/c2.png",
    show: false,
  },
  {
    id: 4,
    imgsa: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/d1.jpg",
    imgsb: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/d2.png",
    show: false,
  },
])

const imagess = ref([
  {
    id: 5,
    imgsa: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/e1.jpg",
    imgsb: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/e2.png",
    show: false,
  },
  {
    id: 6,
    imgsa: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/f1.jpg",
    imgsb: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/f2.png",
    show: false,
  },
  {
    id: 7,
    imgsa: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/g1.jpg",
    imgsb: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/g2.png",
    show: false,
  },
  {
    id: 8,
    imgsa: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/h1.jpg",
    imgsb: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/h2.png",
    show: false,
  },
])

const handleMouseEnter = (item) => {
  item.show = true;
};

const handleMouseLeave = (item) => {
  item.show = false;
};
</script>
    
<style scoped>
.sector {
  width: 100%;
  height: 55rem;
  background-image: url("https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/bgee.jpg");
  background-size: 100% 100%;
  padding-top: 20px;
}

.sector>h3{
  text-align: center;
  color: #2c9bff;
  line-height: 50px;
  font-size: 30px;
  font-family: "Microsoft YaHei", sans-serif;
}

.tabaa{
    display: flex;
    width: 650px;
    margin: 20px auto;
    justify-content: space-around;
    /* background: #ccc; */
}

.tabaa img{
    border-radius: 10px 10px 0px 0px;
}

.tabbb{
    display: flex;
    width: 650px;
    margin: 20px auto;
    justify-content: space-around;
}

.tabbb img{
    border-radius: 0px 0px 10px 10px;
}

.table-item img {
  width: 130px;
  /* height: 425px; */
  transition: opacity 0.3s ease-in-out;
  cursor: pointer; /* 鼠标悬停时显示小手 */
}
</style>